<script lang="ts" setup>
import FormatFormVue from "@/Components/FormatForm.vue";
import CreateDataDicVue from "./Components/CreateDataDic.vue";
import UpdateDataDicVue from "./Components/UpdateDataDic.vue";
import CreateDataDicValueVue from "./Components/CreateDataDicValue.vue";
import UpdateDataDicValueVue from "./Components/UpdateDataDicValue.vue";

import { ref, reactive, watch, onBeforeMount } from "vue";
import { Search as IconSearch, Plus as IconPlus } from "@element-plus/icons-vue";
import { Editor as IconEditor } from "@icon-park/vue-next";
import { GeneralStatusFilter } from "@/utils/filters";
import { DataDictionaryApi } from "@/Api";
import { Action } from "element-plus";

const loading = reactive({ table: false, tree: false });
const actionDic = ref<DataDictionary.Table>(); // 当前选中词典数据
const actionValue = ref<DataDictionary.Value>();
const treeSearch = ref<string>();
const treeData = ref<DataDictionary.Table[]>([]);
const tableData = ref<DataDictionary.Value[]>([]);
const showCreateDataDic = ref<boolean>(false);
const showUpdateDataDic = ref<boolean>(false);
const showCreateDataDicValue = ref<boolean>(false);
const showUpdateDataDicValue = ref<boolean>(false);

const form = reactive({
   label: ""
});

const formOptions = reactive<FormOptions<typeof form>>({
   label: {
      type: "text",
      value: "",
      placeholder: "显示名称"
   }
});

async function getDataDic() {
   loading.table = true;
   try {
      const { code, data } = await DataDictionaryApi.Search();

      if (code == 200) {
         treeData.value = data;
      }
   } catch (error) {
      console.log("error", error);
   }

   loading.table = false;
}

function sumbit() {}

/** 点击指定字典 获取字典内容 */
async function menuItemClick(dic?: DataDictionary.Table) {
   if (!dic) return;

   loading.table = true;
   actionDic.value = dic;

   try {
      const { code, data } = await DataDictionaryApi.ValueSearch({ dic_id: dic.id });
      if (code === 200) tableData.value = data;
   } catch (error) {
      console.log("error", error);
   }

   loading.table = false;
}

/** 编辑字典信息 */
function handlerUpdate(info: DataDictionary.Table) {
   actionDic.value = info;
   showUpdateDataDic.value = true;
}

function handlerValueUpdate(info: DataDictionary.Value) {
   actionValue.value = info;
   showUpdateDataDicValue.value = true;
}

function handlerValueDelete(info: DataDictionary.Value) {
   try {
      ElMessageBox.confirm("确认删除当前数据?", "警告", {
         confirmButtonText: "确定",
         type: "warning",
         callback: async (action: Action) => {
            if (!actionDic.value) return;

            if (action === "confirm") {
               const params: DataDictionary.ValueDelete = {
                  dic_id: actionDic.value.id,
                  value_id: info.id
               };
               const { code } = await DataDictionaryApi.ValueDelete(params);
               if (code === 200) {
                  ElMessage.success("删除成功");
                  menuItemClick(actionDic.value);
               }
            }
         }
      });
   } catch (error) {
      console.log("error", error);
   }
}

watch([showCreateDataDic, showUpdateDataDic], async value => {
   if (!value[0] || !value[1]) await getDataDic();
});
watch([showCreateDataDicValue, showUpdateDataDicValue], async value => {
   if (!value[0] || !value[1]) await menuItemClick(actionDic.value);
});

onBeforeMount(async () => {
   await getDataDic();
});
</script>

<template>
   <div class="clientList">
      <div class="content">
         <div class="left shadowCard">
            <div class="top">
               <el-input v-model="treeSearch" placeholder="字典名称">
                  <template #append>
                     <el-tooltip effect="dark" content="查询字典" placement="top-end">
                        <el-button @click="" :icon="IconSearch" />
                     </el-tooltip>
                  </template>
               </el-input>
               <div class="plus">
                  <el-tooltip effect="dark" content="添加字典" placement="top-start">
                     <el-button @click="showCreateDataDic = true" :icon="IconPlus" />
                  </el-tooltip>
               </div>
            </div>
            <div class="tree">
               <el-menu>
                  <el-menu-item v-for="item in treeData" :index="item.id" @click="menuItemClick(item)">
                     <div class="menu_item">
                        {{ item.label }}

                        <el-tooltip effect="dark" content="编辑字典" placement="left">
                           <IconEditor class="icon" theme="outline" size="20" fill="#333" @click="handlerUpdate(item)" />
                        </el-tooltip>
                     </div>
                  </el-menu-item>
               </el-menu>
            </div>
         </div>
         <div class="right">
            <FormatFormVue :form="form" :form-options="formOptions" @submit="sumbit">
               <template #button>
                  <el-button v-if="actionDic" :icon="IconPlus" type="primary" @click="showCreateDataDicValue = true">
                     添加数据
                  </el-button>
               </template>
            </FormatFormVue>
            <div class="tabBox shadowCard">
               <el-table v-loading="loading.table" :data="tableData" stripe border highlight-current-row empty-text="暂无数据">
                  <el-table-column type="index" width="50" align="right" />
                  <el-table-column prop="name" label="类别名称" />
                  <el-table-column prop="status" label="状态">
                     <template #default="{ row }: { row: DataDictionary.Value }">
                        {{ GeneralStatusFilter[row.status] }}
                     </template>
                  </el-table-column>
                  <el-table-column label="操作" width="175">
                     <template #default="{ row }: { row: DataDictionary.Value }">
                        <el-button @click="handlerValueUpdate(row)">编辑</el-button>
                        <el-button type="danger" @click="handlerValueDelete(row)">删除</el-button>
                     </template>
                  </el-table-column>
               </el-table>
            </div>
         </div>
      </div>

      <CreateDataDicVue v-model="showCreateDataDic" />
      <UpdateDataDicVue v-model="showUpdateDataDic" :dic="actionDic" />
      <CreateDataDicValueVue v-model="showCreateDataDicValue" :dic-id="actionDic?.id" />
      <UpdateDataDicValueVue v-model="showUpdateDataDicValue" :dic-id="actionDic?.id" :value="actionValue" />
   </div>
</template>

<style lang="scss" scoped>
.clientList {
   width: 100%;
   height: 100%;
}
.content {
   width: 100%;
   height: 100%;
   display: flex;
   .left {
      width: 250px;
      height: 100%;
      margin-right: 15px;
      display: flex;
      flex-flow: column nowrap;
      box-sizing: border-box;
      padding: 15px;

      .top {
         margin-bottom: 10px;
         display: flex;
         align-items: center;
         justify-content: space-between;

         .plus {
            margin-left: 10px;
         }
      }

      .tree {
         flex: 1;
         overflow: auto;
      }
   }
   .right {
      display: flex;
      flex-flow: column nowrap;
      flex: 1;
      position: relative;
   }
}
.tabBox {
   flex: 1;
   width: 100%;
   position: relative;
   box-sizing: border-box;
   padding: 15px;
   .el-table {
      position: absolute;
      width: calc(100% - 30px);
      height: calc(100% - 30px);

      .el-table__inner-wrapper {
         height: 100%;
      }
   }
}

.el-menu {
   border: none;
}

.menu_item {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;

   .menu_item_name {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .icon {
         margin-right: 10px;
      }
   }
}
</style>
